<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的投诉</title>
    <!-- 引入Layui -->
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../css/complain.css">


</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 统计卡片 -->
        <div class="complaint-stats">
            <div class="stats-card">
                <div class="title">总投诉数</div>
                <div class="value" id="total-complaints">0</div>
                <div class="trend"><i class="fa fa-arrow-up"></i> 较上月 <span class="up">+16%</span></div>
            </div>
            <div class="stats-card">
                <div class="title">未处理</div>
                <div class="value" id="pending-complaints">0</div>
                <div class="trend"><i class="fa fa-arrow-up"></i> 较上月 <span class="up">+5%</span></div>
            </div>
            <div class="stats-card">
                <div class="title">处理中</div>
                <div class="value" id="processing-complaints">0</div>
                <div class="trend"><i class="fa fa-arrow-down"></i> 较上月 <span class="down">-12%</span></div>
            </div>
            <div class="stats-card">
                <div class="title">已处理</div>
                <div class="value" id="processed-complaints">0</div>
                <div class="trend"><i class="fa fa-arrow-up"></i> 较上月 <span class="up">+23%</span></div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="layui-form-item" style="margin-bottom: 15px;">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" id="add-complaint-btn">
                    <i class="fa fa-plus-circle"></i> 提交新投诉
                </button>
            </div>
        </div>

        <!-- 搜索区域 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">投诉内容</label>
                            <div class="layui-input-inline">
                                <input type="text" name="description" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">处理状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="1">未处理</option>
                                    <option value="2">处理中</option>
                                    <option value="3">已处理</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="complaint-search-btn">
                                <i class="fa fa-search"></i> 搜 索
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <!-- 表格展示 -->
        <table class="layui-hide" id="complaintTable" lay-filter="complaintTableFilter"></table>

        <!-- 行内操作按钮 -->
        <script type="text/html" id="complaintTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-view" lay-event="view">
                <i class="fa fa-eye"></i> 查看详情
            </a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete" style="display: none;">
                <i class="fa fa-trash"></i> 删除
            </a>
        </script>

        <!-- 查看详情弹窗 -->
        <div id="viewComplaint" style="display: none;">
            <div class="layui-form layuimini-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">投诉编号</label>
                    <div class="layui-input-block">
                        <span id="view-complaint-id" class="layui-badge layui-bg-gray"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">投诉人</label>
                    <div class="layui-input-block">
                        <span id="view-name"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">投诉内容</label>
                    <div class="layui-input-block">
                        <p id="view-description" style="white-space: pre-line;"></p>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">投诉对象</label>
                    <div class="layui-input-block">
                        <span id="view-target"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">提交时间</label>
                    <div class="layui-input-block">
                        <span id="view-create-time"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">处理状态</label>
                    <div class="layui-input-block">
                        <span id="view-status" class="status-tag"></span>
                    </div>
                </div>

                <div class="layui-form-item" id="view-reply-container" style="display: none;">
                    <label class="layui-form-label">处理回复</label>
                    <div class="layui-input-block">
                        <div class="layui-border-box layui-textarea" style="height: 100px; overflow-y: auto; padding: 10px; border-radius: 4px;">
                            <p id="view-reply"></p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-primary" id="close-view-btn">
                            <i class="fa fa-times"></i> 关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 提交投诉弹窗 -->
        <div id="addComplaint" style="display: none;">
            <div class="layui-form layuimini-form" lay-filter="addComplaintForm">
                <div class="layui-form-item">
                    <label class="layui-form-label required">投诉人</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="required" lay-reqtext="投诉人不能为空" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">投诉内容</label>
                    <div class="layui-input-block">
                        <textarea name="description" lay-verify="required" lay-reqtext="投诉内容不能为空" class="layui-textarea" placeholder="请详细描述您的投诉内容..."></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">投诉对象</label>
                    <div class="layui-input-inline">
                        <input type="text" name="target" lay-verify="required" lay-reqtext="投诉对象不能为空" class="layui-input" placeholder="例如：物业、邻居、商家等">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">身份证号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="idCard" lay-verify="required" lay-reqtext="身份证号不能为空" class="layui-input" placeholder="请输入身份证号">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitComplaintBtn">
                            <i class="fa fa-check-circle"></i> 提交投诉
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" id="cancel-add-btn">
                            <i class="fa fa-times"></i> 取消
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/layui/2.8.11/layui.min.js" integrity="sha384-PV0WlYwQ7YHjH6U7C0pM9F8H247XJ83JQqG0c62bB6nK8WZJ5D25vE" crossorigin="anonymous"></script>
<script>
    layui.use(['form', 'table', 'layer', 'upload'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var upload = layui.upload;
        let dataList =[]

        const  user =JSON.parse(localStorage.getItem('user'))
        const  userId=user.user.userId
        $.ajaxSetup({
            beforeSend: function(xhr) {
                const data = JSON.parse(localStorage.getItem('user'));
                //输出token
                console.log(data.token);
                if (data.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
                }
            }
        });

        $.getJSON("/comp/getAllById?"+`userId=${userId}`, function(data) {
            if (data.code===0){
                dataList = data.data.list
                console.log(dataList,"sss")
                updateStats();
            }
        })

        // 更新统计数据
        function updateStats() {
            const total = dataList.length;
            const pending = dataList.filter(item => item.status === 1).length;
            const processing = dataList.filter(item => item.status === 2).length;
            const processed = dataList.filter(item => item.status === 3).length;

            console.log(total,pending,processing,processed)
            $('#total-complaints').text(total);
            $('#pending-complaints').text(pending);
            $('#processing-complaints').text(processing);
            $('#processed-complaints').text(processed);
        }


        // 渲染表格
        table.render({
            elem: '#complaintTable',
            toolbar: false,
            url: "/comp/getAllById?"+`userId=${userId}`,
            cols: [[
                { field: 'complaintId', width: 150, title: '投诉编号' },
                { field: 'description', width: 250, title: '投诉内容' },
                { field: 'target', width: 150, title: '投诉对象' },
                { field: 'createdAt', width: 180, title: '提交时间' },
                { field: 'status', width: 120, title: '状态', templet: function (d) {
                        let statusText = '';
                        let statusClass = '';

                        switch (d.status) {
                            case 1:
                                statusText = '未处理';
                                statusClass = 'status-1';
                                break;
                            case 2:
                                statusText = '处理中';
                                statusClass = 'status-2';
                                break;
                            case 3:
                                statusText = '已处理';
                                statusClass = 'status-3';
                                break;
                            default:
                                statusText = '未知';
                                statusClass = '';
                        }

                        return `<span class="status-tag ${statusClass}">${statusText}</span>`;
                    }},
                { fixed: 'right', title: '操作', align: 'center', toolbar: '#complaintTableBar' }
            ]],
            page: true,
            limit: 10,
            limits: [10, 15, 20, 25, 50, 100],
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.list
                };
            },
            lineStyle: 'height: 95px;',
            height: 'full-200'
        });



        // 监听搜索
        form.on('submit(complaint-search-btn)', function (data) {
            const { description, status } = data.field;

            // 过滤数据
            let filteredData = mockData.data.list;

            if (description) {
                filteredData = filteredData.filter(item =>
                    item.description.includes(description)
                );
            }

            if (status) {
                filteredData = filteredData.filter(item =>
                    item.status === parseInt(status)
                );
            }

            // 更新表格
            table.reload('complaintTable', {
                data: filteredData,
                page: { curr: 1 }
            });

            // 更新统计数据
            $('#total-complaints').text(filteredData.length);
            $('#pending-complaints').text(filteredData.filter(item => item.status === 1).length);
            $('#processing-complaints').text(filteredData.filter(item => item.status === 2).length);
            $('#processed-complaints').text(filteredData.filter(item => item.status === 3).length);

            return false;
        });

        // 行内操作
        table.on('tool(complaintTableFilter)', function (obj) {
            var data = obj.data;

            if (obj.event === 'view') {

                console.log( data,"view")
                // 填充详情数据
                $('#view-complaint-id').text(data.complaintId);
                $('#view-name').text(data.name);
                $('#view-description').text(data.description);
                $('#view-target').text(data.target);
                $('#view-create-time').text(data.createdAt);

                // 设置状态标签
                let statusText = '';
                let statusClass = '';

                switch (data.status) {
                    case 1:
                        statusText = '未处理';
                        statusClass = 'status-1';
                        break;
                    case 2:
                        statusText = '处理中';
                        statusClass = 'status-2';
                        break;
                    case 3:
                        statusText = '已处理';
                        statusClass = 'status-3';
                        break;
                    default:
                        statusText = '未知';
                        statusClass = '';
                }

                $('#view-status').text(statusText).attr('class', 'status-tag ' + statusClass);

                // 显示或隐藏回复
                if (data.reply) {
                    $('#view-reply').text(data.reply);
                    $('#view-reply-container').show();
                } else {
                    $('#view-reply-container').hide();
                }

                // 打开详情弹窗
                layer.open({
                    title: '投诉详情',
                    type: 1,
                    content: $('#viewComplaint'),
                    area: ['600px', '500px']
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除该投诉？', {
                    icon: 3,
                    title: '确认删除'
                }, function(index) {
                    // 模拟删除请求
                    setTimeout(function() {
                        layer.msg('删除成功', {icon: 1});
                        obj.del();
                        layer.close(index);

                        // 更新统计数据
                        updateStats();
                    }, 800);
                });
            }
        });

        // 打开提交投诉弹窗
        $('#add-complaint-btn').on('click', function() {
            form.val("addComplaintForm", {
                name: user.user.username  // 实际应用中应该从会话中获取当前用户
            });

            layer.open({
                title: '提交投诉',
                type: 1,
                content: $('#addComplaint'),
                area: ['600px', '550px'],
                success: function() {
                    // 清空表单验证提示
                    $('.layui-form-danger').removeClass('layui-form-danger');
                    $('.layui-form-mid').remove();
                }
            });
        });

        // 关闭详情弹窗
        $('#close-view-btn').on('click', function() {
            layer.closeAll();
        });

        // 取消提交投诉
        $('#cancel-add-btn').on('click', function() {
            layer.closeAll();
        });

        // 提交投诉表单
        form.on('submit(submitComplaintBtn)', function(data) {
            const field = data.field;


            console.log( field,"field")
            // 创建新的投诉对象
            const newComplaint = {
                name: field.name,
                description: field.description,
                target: field.target,
                userId: userId,
            };

            $.ajax({
                url: '/comp/add',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(newComplaint),
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.message);
                        table.reload('currentTableId');
                        layer.closeAll();
                    } else {
                        layer.msg(res.message || '操作失败');
                    }
                },
                error: function () {
                    layer.msg('网络异常');
                }
            });

            // 更新表格和统计数据
            table.reload('complaintTable', {
                data: mockData.data.list
            });
            updateStats();

            // 关闭弹窗
            layer.closeAll();

            // 显示成功提示
            layer.msg('投诉提交成功！我们将尽快处理您的投诉。', {
                icon: 1,
                time: 2000
            });

            return false;
        });
    });
</script>
</body>
</html>
